<template><div style="min-width:300px">

<!--	状态栏 -->
	<div class="w-full h-auto bg-gray-50 p-2
					border-gray-100 border-2 rounded-t-lg">
		<div class="w-full h-full flow-root">
			<div  class="float-left"
					style="width: calc(100% - 62px)">
				<n-tag class="rounded select-none " type="success">{{topic.topics_name.value+" ➡ ︎["+topic.index.value+"]"}}</n-tag>
				<n-divider vertical />
				<n-tag class="rounded select-none" type="info">{{topic.type.value}}</n-tag>
				<div v-for="(v,k) in topic.tag" style="display: inline;" >
					<n-divider vertical />
					<n-tag   class="rounded select-none"
					         :type="TagsNewFunction[k].tag_color(v,topic)"
					         @click="TagsNewFunction[k].on_click($event,v,topic)"
					         @dblclick="TagsNewFunction[k].on_click2($event,v,topic)"
					         @wheel="TagsNewFunction[k].on_wheel($event,v,topic)">
						{{TagsNewFunction[k].view(v,topic)}}</n-tag>
				</div>
			</div>
			<div class="float-right">
				<n-dropdown trigger="hover" :options="操作_options" >
					<n-button >操作</n-button>
				</n-dropdown>
			</div>
		</div>
	</div>
<!--	题目 & 解析 -->
	<div class="w-full h-auto bg-gray-50 p-2
					border-gray-100 border-r-2 border-l-2 border-b-2 rounded-b-lg">
<!--		题目-->
		<component :is="topic.self_new_view.view(topic)"></component>
<!--		解析-->
		<n-divider class="text-gray-300 cursor-pointer select-none"
		           v-if="!swhich_resolve"
		           @dblclick="swhich_resolve=!swhich_resolve">双击查看解析</n-divider>
		<div v-else >
			<n-divider class="text-gray-300 cursor-pointer select-none"
			           @click="swhich_resolve=!swhich_resolve">单击关闭解析</n-divider>
			<div v-if="topic.resolve.value.length >= 1">{{topic.resolve.value}}</div>
			<div v-else>无解析~_~(把题目删除吧...留着也是祸害)</div>
		</div>
	</div>
<!--	题目修改 模态框-->
	<n-modal v-model:show="is_topic_revise">
		<div style="width:500px;max-width: 100%">
			<n-select v-model:value="topic.type.value" :options="topic_type_options" />
			<n-input v-model:value="topic.topic.topic_original.value"
			         type="textarea"
			         placeholder="不打算给题目?"/>
			<n-input v-model:value="topic.resolve.value"
			         type="textarea"
			         placeholder="不打算给解析?"/>
		</div>
	</n-modal>
<!--	笔记 模态框-->
	<n-modal v-if="topic.tag.TagNote != undefined" v-model:show="topic.tag.TagNote.switch_editor.value">
		<div style="width:500px;max-width: 100%;">
			<n-input v-model:value="topic.tag.TagNote.text.value"
			         type="textarea"
			         placeholder="笔记-标签匹配规则: #标签 段落开头"/>
		</div>
	</n-modal>
	
</div></template>

<script lang="ts" setup>
import {
	ref,
	reactive,
	computed,
	watchEffect,
	defineProps,
	withDefaults,
	defineEmits,
	defineExpose,
	useSlots,
	useAttrs,
	h,
} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {ITopic, ITopicView} from "../Ts/Topic";
import {题目类型} from "../Ts/题目类型";
import {NButton} from "naive-ui";
// @ts-ignore
import {TagsNewFunction} from'../Ts/Tag.ts'
import {TopicGroup} from "../Ts/TopicGroup";

const props = withDefaults(defineProps<{
		topic:ITopic<any>
	}>(),{});



const swhich_resolve = ref(false);
const is_topic_revise = ref(false);

const 操作_options = reactive([
	{
		key:'修改题目',
		type:'render',
		render: ()=> h(NButton,{
			strong : true ,
			secondary : true,
			type:"success",
			"onClick":()=>{
				is_topic_revise.value = true;
			}
		},()=>"修改题目")
	},
	{
		key:'删除题目',
		type:'render',
		render: ()=> h(NButton,{
			strong : true ,
			secondary : true,
			type:"error",
			"onClick":()=>{
				TopicGroup.remove_topic(props.topic.topics_name.value, props.topic.index.value);
				swhich_resolve.value = !swhich_resolve.value;//与变量本身目的脱离,这行代码目的是刷新视图
			}
		},()=>"删除题目")
	}
]);

const topic_type_options = reactive([
	{
		label:'未知题目类型',
		value:'未知题目类型'
	},{
		label:'单选题',
		value:'单选题'
	},
])


</script>


<style scoped>

</style>
<!--
topic 核心视图,所有都应该基于它而变化
虽然 变化的只有 topic 视图
-->